<template>
  <div class="multi-language-inline-form">
    <el-form-item-plus
      v-for="lang in languages"
      :key="lang.code"
      :label="getLanguageLabel(lang.code)"
      :prop="propPrefix ? `${propPrefix}.${lang.code}` : undefined"
      :rules="
        required
          ? [
              {
                required: true,
                message: $t('menu.admin.lang.placeholder.translate', {
                  default: '请输入翻译数据',
                  lang: getLanguageLabel(lang.code),
                }),
                trigger: 'blur',
              },
            ]
          : []
      "
    >
      <el-input
        v-model="translations[lang.code]"
        :placeholder="
          $t('menu.admin.lang.placeholder.translate', {
            default: '请输入翻译数据',
            lang: getLanguageLabel(lang.code),
          })
        "
        clearable
        @input="handleInput"
      />
    </el-form-item-plus>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { LanguageEnum } from '@/enums';
import { smartTranslate as $t } from '@/lang';

// Props定义
const props = defineProps({
  // 语言代码数组
  languages: {
    type: Array,
    required: true,
    default: () => [],
  },
  // 绑定值对象 { 'zh-cn': '中文内容', 'en': 'English Content' }
  modelValue: {
    type: Object,
    default: () => ({}),
  },
  // 是否必填
  required: {
    type: Boolean,
    default: false,
  },
  // 表单验证属性前缀
  propPrefix: {
    type: String,
    default: '',
  },
});

// Emits定义
const emit = defineEmits(['update:modelValue', 'change']);

// 响应式数据
const translations = ref({});

// 语言标签映射
// const languageLabels = {
//   'zh-cn': '中文',
//   'zh-tw': '中文(台灣)',

const languageLabels = LanguageEnum.ALL.reduce((acc, current) => {
  acc[current.value] = current.label;
  return acc;
}, {});

// 获取语言标签
const getLanguageLabel = (code) => {
  return languageLabels[code] || code.toUpperCase();
};

// 初始化翻译对象
const initTranslations = () => {
  const newTranslations = {};
  props.languages.forEach((lang) => {
    newTranslations[lang.code] = props.modelValue[lang.code] || '';
  });
  translations.value = newTranslations;
};

// 监听languages变化
watch(
  () => props.languages,
  () => {
    initTranslations();
  },
  { immediate: true, deep: true },
);

// 监听modelValue变化
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal && typeof newVal === 'object') {
      const newTranslations = {};
      props.languages.forEach((lang) => {
        newTranslations[lang.code] = newVal[lang.code] || '';
      });
      translations.value = newTranslations;
    }
  },
  { immediate: true, deep: true },
);

// 处理输入变化
const handleInput = () => {
  const result = { ...translations.value };
  emit('update:modelValue', result);
  emit('change', result);
};

// 暴露方法给父组件
defineExpose({
  getTranslations: () => ({ ...translations.value }),
  setTranslations: (values) => {
    if (values && typeof values === 'object') {
      translations.value = { ...values };
      handleInput();
    }
  },
  // 兼容性方法：获取数组格式的翻译值
  getTranslationsArray: () => {
    return props.languages.map((lang) => translations.value[lang.code] || '');
  },
  // 兼容性方法：设置数组格式的翻译值
  setTranslationsArray: (values) => {
    if (Array.isArray(values)) {
      const newTranslations = {};
      props.languages.forEach((lang, index) => {
        newTranslations[lang.code] = values[index] || '';
      });
      translations.value = newTranslations;
      handleInput();
    }
  },
});
</script>

<style scoped>
.multi-language-inline-form {
  width: 100%;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  width: 100%;
}
</style>
